<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg viewBox="0 0 100 100" width="400" height="400" style="border:solid #ccc;">
        <rect x="10" y="10" width="50" height="50" fill="red">
            <set to="20" attributeName="x" begin="1s" dur="2s" fill="freeze"></set>
        </rect>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg">
        <circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
          <set id="show" attributeName="visibility" attributeType="CSS" to="visible"
               begin="0s; hide.end" dur="1s" fill="freeze"/>
          <set id="hide" attributeName="visibility" attributeType="CSS" to="hidden"
               begin="show.end" dur="1s" fill="freeze"/>
        </circle>
      </svg>
</body>
</html>